<template>
  <div class="icon-list">
    <div class="list-container">
      <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index">
        <div class="icon-item">
          <svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;" />
          <span>{{ item }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import icons from './components/requireIcons'

const iconList = ref(icons)
</script>

<style lang="scss" scoped>
.icon-list {
  overflow: auto;
  padding-bottom: 80px;
}

.list-container {
  display: flex;
  flex-wrap: wrap;
}

.icon-item-wrapper {
  width: calc(100% / 3);
  height: 25px;
  line-height: 25px;
  cursor: pointer;
  display: flex;
}

.icon-item {
  display: flex;
  max-width: 100%;
  height: 100%;
  padding: 0 5px;

  &:hover {
    background: #ececec;
    border-radius: 5px;
  }

  .icon {
    flex-shrink: 0;
  }

  span {
    display: inline-block;
    vertical-align: -0.15em;
    fill: currentColor;
    padding-left: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>